@import "./variables.scss";
@import "./transition.scss";

/* Global scss */
body {
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Helvetica Neue", Helvetica,
    "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

html {
  height: 100%;
}

#app {
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a,
a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
  outline: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &::after {
    display: table;
    clear: both;
    content: "";
  }
}

.text-center {
  text-align: center;
}

.no-padding {
  padding: 0 !important;
}

/* flex */
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flx-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flx-align-center {
  display: flex;
  align-items: center;
}

/* clearfix */
.clearfix-after {
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
  content: "";
}

/* 文字单行省略号 */
.sle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 文字多了自動換行 */
.break-word {
  word-break: break-all;
  word-wrap: break-word;
}

/* scroll bar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #d3d3d3;
  border-radius: 20px;
  box-shadow: inset 0 0 0 white;
}

/* nprogress 样式 */
#nprogress .bar {
  background: var(--el-color-primary) !important;
}

#nprogress .spinner-icon {
  border-top-color: var(--el-color-primary) !important;
  border-left-color: var(--el-color-primary) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary) !important;
}

/* 当前页面最大化 css */
.main-maximize {
  .aside-split,
  .el-aside,
  .el-header,
  .el-footer,
  .tabs-nav {
    display: none !important;
  }
}

/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
.antd-message {
  padding: 10px 13px !important;
  background: #ffffff !important;
  border-width: 0 !important;
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d !important;

  &.el-message.is-closable .el-message__content {
    padding-right: 17px !important;
  }

  & .el-message__content {
    color: #000000d9 !important;
    pointer-events: all !important;
    background-image: initial !important;
  }

  & .el-message__icon {
    margin-right: 8px !important;
  }

  & .el-message__closeBtn {
    right: 9px !important;
    border-radius: 4px;
    outline: none;
    transition: background-color 0.2s, color 0.2s;

    &:hover {
      background-color: rgb(0 0 0 / 6%);
    }
  }
}
